import React, { Component } from "react"
import "antd/dist/antd.css"
import {Button} from "antd"
import "./index.css"

//子组件AddMsg
function AddMsg(props){
  return(
      <Button
        type="primary"
        onClick = {()=>props.AddMsgFn(1)}
      >
      增加消息：{props.Num}
      </Button>
    )
}
//减少的子组件
function DellMsg(props){
  return(
    <Button
      type="danger"
      onClick={()=>props.DelMsgFn(1)}>
      减少消息：{props.Num}
    </Button>
  )
}
// 父组件 Count
class Count extends Component {
  constructor(props) {
    super(props)
    this.state = {
      Num:1
    }
  }

  AddMsgFn = (num)=>{
    this.setState(presState =>{
     return{Num:presState.Num + num}  
    })
  }
  DelMsgFn = (num)=>{
    this.setState(presState=>{
      return{Num:presState.Num - num}
    })
  }

  render() {
    return (
      <div className="msgBox">
        总消息条数：{this.state.Num}
        <hr/>
      <div>
      <AddMsg 
          Num = {this.state.Num}
          AddMsgFn = {this.AddMsgFn}
        />
        <DellMsg 
          Num = {this.state.Num}
          DelMsgFn = {this.DelMsgFn}
        />  
      </div>
      </div>
    )
  }
}
export default Count;